<template>
  <PageLayout>
    <!-- <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template> -->
    <div class="table-box">
      <div class="head-box">
        <div class="title">升级任务</div>
        <a-space :size="16">
          <a-button type="primary" @click="edit()">新增</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postFirmwareTaskPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'deviceList'">
              <a class="btn" @click="showDeviceList(record)">
                {{ record?.deviceList && record.deviceList[0]?.deviceNo }}...
              </a>
            </template>
            <template v-if="column.key === 'action'">
             <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="remove(record.id)">删除</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>

    <a-modal
      v-model:visible="visible"
      title="升级设备列表"
      :width="800"
      @ok="bindShop"
    >
      <!-- <a-table
        :row-key="
          (record, index) => {
            return record.id || index;
          }
        "
        @change="tableChange1"
        :pagination="pageOptions2"
        :row-selection="rowSelection"
        :columns="columns1"
        :data-source="dataSource"
        :scroll="{ x: 'calc(100%)' }"
      /> -->

      <BasicTable
        ref="tableRef1"
        :columns="columns1"
        :query-params="queryData1"
        :apiFetch="postFirmwareTaskDevicePage"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'deviceList'">
            <a class="btn" @click="showDeviceList(record)">
              {{ record?.deviceList && record.deviceList[0]?.deviceNo }}...
            </a>
          </template>
        </template>
      </BasicTable>
    </a-modal>
  </PageLayout>
</template>

<script setup>
import {
  postFirmwareTaskPage,
  postFirmwareTaskDevicePage,
  postFirmwareTaskDelete,
  postUserUpdateStatus,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "固件名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "username",
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },

  {
    title: "升级批次名称",
    dataIndex: "name",
    key: "name",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "升级设备列表",
    dataIndex: "deviceList",
    key: "deviceList",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "升级时间",
    dataIndex: "installType",
    key: "installType",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.installType == 0
        ? "立即升级"
        : record.installType == 1 && record.installTime;
    },
  },
  {
    title: "升级状态",
    dataIndex: "status",
    key: "status",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.status == 0
        ? "待开始"
        : record.status == 1
        ? "进行中"
        : "已完成";
    },
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];
const columns1 = [
  {
    title: "设备编码",
    dataIndex: "deviceNo",
    key: "deviceNo",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "设备机器号",
    dataIndex: "deviceSn",
    key: "deviceSn",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "所属门店",
    dataIndex: "shopName",
    key: "shopName",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "升级进度",
    dataIndex: "installRatio",
    key: "installRatio",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.installRatio + "%";
    },
  },
  {
    title: "升级状态",
    dataIndex: "status",
    key: "status",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => {
      return record.status == 0
        ? "待升级"
        : record.status == 1
        ? "升级中"
        : record.status == 2
        ? " 升级成功"
        : "升级失败";
    },
  },
];

const route = useRoute();
const queryData = reactive({
  firmwareId: route.query.id,
});
const queryData1 = reactive({
  firmwareInstallTaskId: route.query.id,
});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  router.push({
    path: "/firmware/task/add",
    query: {
      id: route.query.id,
      type: route.query.type,
    },
  });
};

const changeStatus = (record) => {
  const title = !record.status ? "禁用" : "启用";
  comfirmModal({
    content: `确认${title}该账号`,
    onOk() {
      postUserUpdateStatus({
        id: record.id,
        status: !record.status,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const remove = (id) => {
  comfirmModal({
    content: "确认删除该任务",
    onOk() {
      postFirmwareTaskDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};

const visible = ref(false);
const tableRef1 = ref(null);
const showDeviceList = (record) => {
  visible.value = true;
  queryData1.firmwareInstallTaskId = record.id;
  // dataSource.value = record.deviceList;
  // pageOptions2.value.total = record.deviceList.length;
  tableRef1.value.fetch();
};
const dataSource = ref([]);

const pageOptions2 = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  size: "small",
  pageSizeOptions: ["10", "20", "30", "40", "50"],
  showQuickJumper: true,
  showSizeChanger: true, // 显示可改变每页数量
  showTotal: (total) => `共 ${total} 条`, // 显示总数,
  onChange: (current, pageSize) => {
    pageOptions2.value.current = current;
    pageOptions2.value.pageSize = pageSize;
  },
  onShowSizeChange: (current, pageSize) => {
    pageOptions2.value.current = current;
    pageOptions2.value.pageSize = pageSize;
  },
});

// const visible = ref(false);
// const deviceList = ref([]);
// const showDeviceList = (record) => {
//   visible.value = true
//   deviceList.value = record.deviceList;
// };
</script>

<style lang="less" scoped></style>
